import React, { useEffect } from 'react'
import style from './style.module.scss'
import { useRecoilState } from 'recoil'
import { UserProfileMock } from './mock'
import AvatarView from '../../AvatarView'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPen, faGlobeAfrica, faMapMarker } from '@fortawesome/free-solid-svg-icons'
import { Link } from 'react-router-dom'
import { UserService } from '../../../transfer/service/UserService'

export default function UserProfileBanner() {
    const [userProfileBanner, setUserProfileBanner] = useRecoilState(UserProfileMock)

    useEffect(() => {
        new UserService().getProfile(JSON.parse(localStorage.getItem('account') as any).id).then(res => {
            setUserProfileBanner(res.data.data.profile)
        })
    }, [])

    return (
        <div id="userProfileBanner" className={style.container}>
            <AvatarView
                width={'3.75rem'}
                height={'3.75rem'}
                img={'http://localhost:3000/' + userProfileBanner.avatar}
            />
            <div className={style.info}>
                <div className={style.title}>
                    <span>{userProfileBanner.nickName}</span>
                    <div className={style.edit__btn}>
                        <FontAwesomeIcon icon={faPen} />
                        <Link to={'/account_setting/profile/' + JSON.parse(localStorage.getItem('account') as any).id}>
                            修改资料
                        </Link>
                    </div>
                </div>
                <span className={style.intro}>
                    {userProfileBanner.intro != ''
                        ? userProfileBanner.intro
                        : '下载由' + userProfileBanner.nickName + '策划的免费，美丽，高质量的照片。'}
                </span>
                {userProfileBanner.location != '' ? (
                    <Link to={'/search/photos/' + userProfileBanner.location} className={style.location}>
                        <FontAwesomeIcon icon={faMapMarker} />
                        <span>{userProfileBanner.location}</span>
                    </Link>
                ) : (
                    ''
                )}
                {userProfileBanner.location != '' ? (
                    <a href={userProfileBanner.personalSite} className={style.person__website}>
                        <FontAwesomeIcon icon={faGlobeAfrica} />
                        <span>{userProfileBanner.personalSite}</span>
                    </a>
                ) : (
                    ''
                )}
                {/*<div className={style.interests}></div>*/}
            </div>
        </div>
    )
}
